<template>
  <div class="address-edit">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    >
    <div style="padding:1px 17px;margin-top:17px">
    <span style="font-size:13px;">性别</span>
    <van-radio-group style="float:right" v-model="radio" direction="horizontal" icon-size="13px">
    <van-radio name="true">男</van-radio>
    <van-radio name="false">女</van-radio>
    </van-radio-group>
    </div>
    <div style="padding:1px 17px;margin-top:25px">
    <span style="font-size:13px;">地址标签</span>
    <van-radio-group style="float:right" v-model="space" direction="horizontal" icon-size="13px">
    <van-radio name="家">家</van-radio>
    <van-radio name="学校">学校</van-radio>
    <van-radio name="单位">单位</van-radio>
    </van-radio-group>
    </div>
    </van-address-edit>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit, Toast, RadioGroup, Radio } from 'vant'
import request from '@/API/request'
import { setAddRess } from '@/API/setAddRess'

Vue.use(AddressEdit)
Vue.use(Toast)
Vue.use(RadioGroup)
Vue.use(Radio)
export default {
  name: 'addressEdit',
  data () {
    return {
      radio: 'true',
      space: '家',
      areaList: {
        province_list: {
          // 110000: '北京市',
          // 120000: '天津市'
        },
        city_list: {
        },
        county_list: {
        }
      },
      searchResult: []
    }
  },
  methods: {
    onSave (values) {
      console.log(values)
      const value = {
        name: values.name,
        phone: values.tel,
        detail: values.addressDetail,
        area: values.province + values.city + values.county,
        sex: this.radio,
        tag: this.space,
        default: values.isDefault,
        ZIP: values.postalCode
      }
      console.log(value)
      setAddRess(value).then(res => {
        if (res.meta.code === 200) {
          Toast('添加成功,您将回到地址列表')
          setTimeout(() => {
            this.$router.push('/address')
          }, 2000)
        }
      })
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
        ]
      } else {
        this.searchResult = []
      }
    },
    getArea: () => {
      return request({
        url: '/area',
        method: 'get'
      })
    }
  },
  created () {
    this.getArea().then(res => {
      this.areaList.province_list = res.body.province_list
      this.areaList.city_list = res.body.city_list
      this.areaList.county_list = res.body.county_list
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
